<template>
  <LayoutContent>
    <div class="button">
      <div class="detail">详情</div>
      <div>
        <el-button type="primary" @click="clickHandle('edit')" v-if="!isTea">编辑</el-button>
        <el-button @click="clickHandle('back')">返回</el-button>
      </div>
    </div>
    <div class="form">
      <BasicDetail :form="form" :list="list" label-position="left" label-width="auto">
        <template #gender="{ gender }">
          <el-input :value="gender ? '男' : '女'" />
        </template>
        <template #identity="{ identity }"> <el-input :value="getIdentity(identity)" /> </template
        ><template #year="{ year }">
          <el-input :value="year + '届'" />
        </template>
      </BasicDetail>
    </div>
  </LayoutContent>
</template>

<script setup>
import { onMounted, inject, ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getDetailApi } from '@/api/student/index'
const isTea = inject('isTea')
const list = [
  {
    label: '学号',
    field: 'id',
  },
  {
    label: '账号',
    field: 'account',
    hide: isTea.value,
  },
  {
    label: '姓名',
    field: 'name',
  },
  {
    label: '年龄',
    field: 'age',
  },
  {
    label: '性别',
    field: 'gender',
  },
  {
    label: '手机号',
    field: 'phone',
    hide: isTea.value,
  },
  {
    label: '邮箱',
    field: 'email',
    hide: isTea.value,
  },
  {
    label: '专业',
    field: 'majorName',
  },
  {
    label: '班级',
    field: 'className',
  },
  {
    label: '届时',
    field: 'year',
  },
  {
    label: '身份',
    field: 'identity',
    hide: isTea.value,
  },
  {
    label: '创建时间',
    field: 'createTime',
  },
  {
    label: '更新时间',
    field: 'updateTime',
  },
]
const form = ref({})

const route = useRoute()
const router = useRouter()
const getDetail = async () => {
  const res = await getDetailApi({ id: route.query.id })
  if (res.code == 200) {
    form.value = res.data
  } else {
    ElMessage.error(res.msg)
  }
}

onMounted(() => {
  getDetail()
})

const getIdentity = computed(() => {
  return (identity) => {
    switch (identity) {
      case 1:
        return '管理员'
      case 2:
        return '学生'
      case 3:
        return '教师'
    }
  }
})

const clickHandle = (type) => {
  switch (type) {
    case 'edit':
      router.push({ path: '/student/add', query: { id: route.query.id } })
      break
    case 'back':
      router.back()
      break
  }
}
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
  height: 100%;
  padding-bottom: 40px;
}
.content {
  height: 100%;
  .card {
    height: 100%;

    .button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 2px solid #eee;
    }
    .form {
      height: 100%;
      overflow: auto;
      margin-top: 10px;
      margin-bottom: 20px;
    }
  }
}
</style>
